<!--
 * @author: 十一
 * @since: 2024-11-25
 * RoleMenuDrawer.vue
 * @desc: new page
-->
<template>
  <a-drawer
    v-model:open="open"
    class="custom-class"
    root-class-name="root-class-name"
    :root-style="{ color: 'blue' }"
    title="分配菜单权限"
    placement="right"
    @after-open-change="afterOpenChange"
    width="500"
  >
    <a-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      checkable
      autoExpandParent
      :tree-data="treeData"
      :field-names="{
        children: 'children',
        label: 'title',
        key: 'id',
      }"
    >
      <template #title="{ title, key }">
        <span>{{ title }}</span>
      </template>
    </a-tree>
    <template #footer>
      <a-button style="margin-right: 8px" @click="()=>open = false">关闭</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-drawer>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";

import { getMenuListApi } from "@/api/main";

const getData = () => {
  getMenuListApi({}).then((response: any) => {
    treeData.value = response.result.list;
  });
};

const open = ref<boolean>(false);
const treeData = ref<any[]>([]);
const expandedKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);
const checkedKeys = ref<string[]>([]);
watch(expandedKeys, () => {
  console.log("expandedKeys", expandedKeys);
});
watch(selectedKeys, () => {
  console.log("selectedKeys", selectedKeys);
});
watch(checkedKeys, () => {
  console.log("checkedKeys", checkedKeys);
});
const afterOpenChange = (bool: boolean) => {
  console.log("open", bool);
};
const handleOk = ()=>{
  console.log(checkedKeys.value)
  open.value = false;
}
const showDrawer = (options: any) => {
  console.log(options);
  open.value = true;
  getData();
};
defineExpose({
  showDrawer,
});
</script>

<style lang="less" scoped></style>
